<template>
  <div>
     <!--------------------轮播-------------------------->
    <div   class="banner" v-if="navIs!='list' && navIs!='technical' ">
      <div v-for="(item, i) in banner" :key="i" :class="i == 0 ? 'item active' : 'item'">
        <a :href="item.link" target="_blank" v-if="item.link !=''">
          <img :src="item.imgurl"   />
        </a>
        <img src="../assets/static/02.png"   v-else />
      </div>
      <div class="banner_but">
          <a href="" target=""> </a>
      </div>
    </div>
    <!---------------------end--------------------------->
    <div class="produc revealtop01">
      <div class="container">
   
         <el-carousel :interval="5000" arrow="always" height="120px" class="carousel">
          <el-carousel-item v-for="(item, i) in adindex" :key="i" >
            <router-link target="_blank" :to="{ path: '/list', query: { id: item.id } }" v-if="item.link == '/list'">
                <img :src="item.url" />
              </router-link>
              <div style="height:100%" v-else>
                <a target="_block" :href="item.link" v-if="item.link != ''"><img :src="item.url" /></a>
                <img v-else :src="item.url" />
              </div>
          </el-carousel-item>
        </el-carousel>

       
        <!--------------------end---------------------------->

        <!-- 我们的产品和服务 -->
        <div class="area-row">
          <div class="area-row-h">我们的产品和服务</div>
          <div class="server_hover_box">
            <a href="javascript:void(0);" @click="server_hover_prev" class="prev btn"></a>
            <div class="server_hover">
              <ul :style="'transform: translate3d('+server_hover_index*(1.94+0.4)+'rem, 0px, 0px); transition-duration: 1000ms;'">
                <li class="icon-document" v-for="(item, i) in productServiceList" :key="i" @click="productService(i)" @mouseenter="productService(i)" :class="
                atv == i ? 'atv icon-document-' + [i] : 'icon-document-' + [i]
              "></li>
              </ul>

              <!-- <p :style="atv == i ? 'color: #ff7601' : ''">{{ item.name }}</p> -->
            </div>
            <a href="javascript:void(0);" @click="server_hover_next" class="next btn"></a>
          </div>

          <div class="row area-row-c" v-if="productServiceid == 0">

            <div class="engine-box">
              <h2 v-html="productServiceListEngine.details" class="engine-box-details"></h2>
              <div v-for="(item, i) in productServiceListEngine.child" :key="i" class="purchase-engine-box">
                <p @click="binggeeclick(i)" :class="geeindex == i ?'geeindex atv':'geeindex'">
                  {{ item.name }}
                </p>
              </div>
            </div>

            <div style="width:72%">
              <div v-for="(item, i) in productServiceListEngine.child" :key="i" class="purchase-engine">
                <div class="purchase-box" v-if="geeindex == i">
                  <p v-html="item.details"></p>
                </div>
              </div>
              <div class="purchase-but">
                <div class="purchase-dow-but" v-for="(item, i) in productServiceListEngine.child" :key="i">
                  <div class="dow-but" v-if="geeindex == i">
                    <a :href="item.downLocal" target="_block">蓝奏下载</a>
                    <a :href="item.downLzy" target="_block">本地下载</a>
                  </div>
                </div>
              </div>
            </div>

          </div>

          <div class="row flex-container" v-if="productServiceid == 1">
            <div v-for="(item, i) in productServiceListFeature1" :key="i" class="col-lg-4 col-md-4 col-sm-6 col-xs-6 mb-40  ">
              <div class="area-row-box">
                <h2>{{ item.title }}</h2>
                <div class="purchase-cn">
                  <p v-html="item.content"></p>
                </div>
                <div class="purchase-buy-one">
                  <a href="https://geezf.net/" target="_black">{{ item.payPirce }}</a>
                </div>
                <div v-if="productServiceid == 1" class="purchase-buy">
                  <a :href="item.downUrl" target="_blank">
                    <span>立即购买</span>
                  </a>
                </div>
              </div>
            </div>
          </div>

          <div class="row flex-container" v-if="productServiceid == 2">
            <div v-for="(item, i) in productServiceListFeature2" :key="i" class="col-lg-4 col-md-4 col-sm-6 col-xs-6 mb-40  ">
              <div class="area-row-box">
                <h2>{{ item.title }}</h2>
                <div class="purchase-cn">
                  <p v-html="item.content"></p>
                </div>
                <div class="purchase-buy-one">
                  <a href="https://geezf.net/" target="_black">{{ item.payPirce }}</a>
                </div>
                <div v-if="productServiceid == 2" class="purchase-buy">
                  <a :href="item.downUrl" target="_blank">
                    <span>立即下载</span>
                  </a>
                </div>
              </div>
            </div>
          </div>

          <div class="row flex-container" v-if="productServiceid == 3">
            <div v-for="(item, i) in productServiceListFeature3" :key="i" class="col-lg-4 col-md-4 col-sm-6 col-xs-6 mb-40  ">
              <div class="area-row-box">
                <h2>{{ item.title }}</h2>
                <div class="purchase-cn">
                  <p v-html="item.content"></p>
                </div>
                <div class="purchase-buy-one">
                  <a href="http://wpa.qq.com/msgrd?v=3&amp;uin=89348505&amp;site=qq&amp;menu=yes" target="_black">{{ item.payPirce }}</a>
                </div>

                <div class="purchase-buy">
                  <a :href="item.downUrl" target="_blank">
                    <span>联系购买</span>
                  </a>
                </div>
              </div>
            </div>
          </div>

          <div class="row flex-container" v-if="productServiceid == 4">
            <div v-for="(item, i) in productServiceListFeature4" :key="i" class="col-lg-4 col-md-4 col-sm-6 col-xs-6 mb-40  ">
              <div class="area-row-box">
                <h2>{{ item.name }}</h2>
                <div class="purchase-cn" v-html="item.details"></div>
                <div class="purchase-buy">
                  <a style="color: #fe7305" :href="item.downLzy" target="_block">
                    <span>点击查看</span>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!---------------------end------------------------------->
      </div>
    </div>
    <!----------------------------------------------------->

    <!-- GEE引擎优势 -->
    <div class="produc  revealtop02">
      <div class="container">
        <div class="area-row-h">
        
        </div>
        <div class="row">
          <div v-for="(item, i) in product" :key="i" class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
            <div class="product-item">
              <div>
                <img class="product-item-img" :src="item.img" alt="" />
              </div>
              <div>
                <p class="product-item-title"> {{ item.title }}</p>
                <p class="product-item-desc"> {{ item.simpleTxt }}</p>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
    <!----------------------end----------------------------->

    <!-- 新闻动态 -->
    <div class="produc revealtop03">
      <div class="container">
        <!-- <div class="area-row-h">新闻动态</div>
        <h3 class="title">
          为您提供行业资讯、活动广告、产品发布，汇聚前沿流行的传奇行业信息
        </h3> -->
        <div class="area-row-h">

        </div>
        <div class="row" style="    display: flex;
    justify-content: space-between;">
          <div class="product-exampl" v-for="(item, i) in news" :key="i">

            <!-- <div class="product-exampl-img">
                <router-link target="_blank" :to="{ path: '/details', query: { id: item.id } }">
                  <img :src="item.img" />
                  <p class="product-exampl-img-title">{{ item.title }}</p>
                </router-link>
              </div> -->
            <router-link target="_blank" :to="{ path: '/details', query: { id: item.id } }">
              <div class="product-exampl-title">
                {{ item.title }}
              </div>
              <div class="product-exampl-desc">
                {{ item.title }}
              </div>
            </router-link>
          </div>
        </div>
      </div>
    </div>
    <!----------------------end----------------------------->

    <!-- 产品展示 -->
    <div class="produc reveal">
      <!-- <div class="container">
        <h2 class="letter-space text-center">GEE版本保护中心 优秀作品展示</h2>
        <div class="desc_line"></div>
      </div> -->
      <div class="area-row-h">
     
      </div>
      <div class="btnMode" id="slider">
        <a href="javascript:void(0);" @click="prev" class="prev btn"></a>
        <div class="scroll" style="overflow: hidden;">
          <div class="scrollContainer">
            <div class="panel panelnone">
              <span class="imgbg"></span>
              <a target="_block" :href="showpartnerList[index-1].link" v-if="showpartnerList[index].link != ''"><img :src="showpartnerList[index-1].imgurl" /></a>
              <img v-else :src="showpartnerList[index].imgurl" />
            </div>
          </div>
          <div class="scrollContainer">
            <div class="panel current">
              <span class="imgbg"></span>
              <a target="_block" :href="showpartnerList[index].link" v-if="showpartnerList[index].link != ''"><img :src="showpartnerList[index].imgurl" /></a>
              <img v-else :src="showpartnerList[index].imgurl" />
            </div>
          </div>

          <div class="scrollContainer">
            <div class="panel panelnone">
              <span class="imgbg"></span>
              <a target="_block" :href="showpartnerList[index+1].link" v-if="showpartnerList[index].link != ''"><img :src="showpartnerList[index+1].imgurl" /></a>
              <img v-else :src="showpartnerList[index].imgurl" />
            </div>
          </div>

          <!-- <ul class="scrollContainer">

            <li class="panel" :id="'panel_'+i" v-for="(item, i) in showpartnerList" :key="i">
              <a target="_block" :href="item.link" v-if="item.link != ''"><img :src="item.imgurl" /></a>
              <img v-else :src="item.imgurl" />
            </li>

          </ul> -->
        </div>
        <a href="javascript:void(0);" @click="next" class="next btn"></a>
      </div>
    </div>
    <!----------------------end----------------------------->
    <Contact />

    <!----------------------end----------------------------->
  </div>
</template>

<script>
import Contact from '../components/contact.vue'

import api from '@/api/index'
export default {
  name: 'index',
  components: {
    Contact
  },

  data () {
    return {
       banner: '',
      server_hover_index: 0,
      index: 1,
      bartime: null,
      geeindex: 0,
      atv: 0,
      banner: '',
      contactList: '',
      journalismList: '',
      productServiceList: '',
      showpartnerList: [{ link: '' }, { link: '' }, { link: '' }],
      news: '',
      adindex: [],
      product: [
        {
          title: '正版授权',
          simpleTxt: '正版授权引擎,开服无忧。',
          id: 1,
          img:"",
          imges: ""
        },
        {
          title: '免费稳定',
          simpleTxt:
            '-提供全功能10人测试版,小伙伴玩服无需付费。 -提供正式版50人免费引擎,超过人数才需要购买网关。',
          id: 2,
          img: "require('../assets/static/ico1.png')",
          imges: "require('../assets/static/ico0.png')"
        },
        {
          title: '扩展性强',
          simpleTxt:
            '-.支持市面各种引擎转换提供GOM引擎、leg引擎、hero引擎等市面常见引擎转换工具,并持续更新。',
          id: 3,
          img:" require('../assets/static/ico2.png')",
          imges: "require('../assets/static/ico0.png')"
        },
        {
          title: '配套完善',
          simpleTxt:
            '-.致力为用户打通各个工具开区助手、微信验证、支付渠道等且持续更新。',
          id: 4,
          img:" require('../assets/static/ico3.png')",
          imges:" require('../assets/static/ico0.png')"
        },
        {
          title: '宠物骑战',
          simpleTxt:
            '-独家宠物坐骑系统,支持各种宠物攻击触发,更方便便捷的打造各种个性玩法。',
          id: 5,
          img:" require('../assets/static/ico4.png')",
          imges: "require('../assets/static/ico0.png')"
        },
        {
          title: '兼容性高',
          simpleTxt: '-兼容市面上各个引擎的脚本命令,脚本开发更方便更便捷。',
          id: 6,
          img: "require('../assets/static/ico5.png')",
          imges: "require('../assets/static/ico0.png')"
        },
        {
          title: '完美封挂',
          simpleTxt:
            '-官方研发蓝盾封挂网关,封杀市面一切外挂,持续为广大用户安全提供支撑。',
          id: 7,
          img: "require('../assets/static/ico6.png')",
          imges: "require('../assets/static/ico0.png')"
        },
        {
          title: '插件支持',
          simpleTxt:
            '-提供API接口更开放支持任何第三方自动研发插件,定制属于自己的专属功能',
          id: 8,
          img: "require('../assets/static/ico7.png')",
          imges: "require('../assets/static/ico0.png')"
        },
        {
          title: '24小时客服团队技术支持',
          simpleTxt:
            '-秉承客户至上服务第一的原则,提供7*24小时技术客服团队技术支持，全天专业技术为您在线答疑。',
          id: 9,
          img: "require('../assets/static/ico8.png')",
          imges: "require('../assets/static/ico0.png')"
        }
      ],
      num: -1,
      productServiceListEngine: '',
      productServiceid: 0,
      productServiceListFeature1: '',
      productServiceListFeature2: '',
      productServiceListFeature3: '',
      productServiceListFeature4: ''
    }
  },

  mounted () {
 

    api.index().then(res => {
       this.banner = res.data.data.banner
      this.news = res.data.data.contentList

      this.showpartnerList = res.data.data.showpartnerList

      var add = res.data.data.ad
      add.map(item => {
        if (item.position == 1) {
          this.adindex.push(item)
        }
      })

      this.productServiceList = res.data.data.productServiceList
      this.productServiceListEngine = res.data.data.productServiceList[0]
      let d = res.data.data.productServiceList
      this.productServiceListFeature4 = d[d.length - 1].child
    })

    api.purchasedetails({ purchaseId: 1 }).then(res => {
      this.productServiceListFeature1 = res.data.data.list
    })
    api.purchasedetails({ purchaseId: 2 }).then(res => {
      this.productServiceListFeature2 = res.data.data.list
    })
    api.purchasedetails({ purchaseId: 3 }).then(res => {
      this.productServiceListFeature3 = res.data.data.list
    })

    // this.list()
  },

  methods: {
    server_hover_prev () {
      if (this.server_hover_index >= 0) {
        return
      }
      this.server_hover_index += 2
    },
    server_hover_next () {
      let len = Math.ceil(this.productServiceList.length / 2)
      if (this.server_hover_index <= -len) {
        return
      }
      this.server_hover_index -= 2
    },
    prev () {
      if (this.index <= 1) {
        return
      }
      this.index--
    },
    next () {
      if (this.index >= this.showpartnerList.length - 2) {
        return
      }
      this.index++
    },
    binggeeclick (i) {
      this.geeindex = i
    },
    match (val) {
      let str = val || ''
      let index = str.lastIndexOf(' ')
      str = str.substring(0, index)
      return str
      // return val.match(/(\S*) /)[1]
    },
    searchEngine (e, i) {
      this.engineType = e
      this.engineIndex = i
      this.name = ''
      this.list()
    },
    searchVersion (e, i) {
      this.versionType = e
      this.versionIndex = i
      this.name = ''
      this.list()
    },
    searchPurchase (e, i) {
      this.purchaseType = e
      this.purchaseIndex = i
      this.name = ''
      this.list()
    },
    searchName () {
      this.purchaseType = ''
      this.versionType = ''
      this.engineType = ''
      this.retIS = true
      this.list()
    },
    list () {
      api
        .list({
          limit: this.limit,
          page: this.page,
          engineType: this.engineType,
          versionType: this.versionType,
          purchaseType: this.purchaseType,
          name: this.name
        })
        .then(res => {
          this.tableData = res.data.data.list
          if (this.retIS) {
            this.retrieval = this.tableData.length
          }
        })
    },
    change (e) {
      this.$router.push({ path: '/details', query: { id: e } })
    },
    productService (i) {
      this.productServiceid = i
      this.atv = i
    }
  },

  beforeDestroy () {
    // 离开页面时的生命周期函数
    clearInterval(this.bartime)
  }
}
</script>

<style scoped lang="less">
#slider {
  width: 85%;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 0.2rem 0.15rem;
  position: relative;
  margin: 0 auto;
}
.scroll {
  width: 65%;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.scrollContainer .panel {
  position: relative;
  width: 2.35rem;
  height: 1.92rem;

  overflow: hidden;
  text-align: center;
  background: none;
  transition: all 0.3s;
  img {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
  }
  .imgbg {
    width: 100%;
    height: 100%;
    position: absolute;
 
    background-size: contain;
    left: 0;
    top: 0;
  }
}
.scrollContainer .panel.current {
  width: 4.7rem;
  height: 3.84rem;
  img {
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
  }
}
.server_hover_box a.btn,
.server_hover_box a.next {
  display: none;
}
.btnMode a.prev,
.server_hover_box a.prev {

  background-size: 100% 100%;
}
.btnMode a.next,
.server_hover_box a.next {

  background-size: 100% 100%;
}
.btnMode a.btn,
.server_hover_box a.btn,
.server_hover_box a.next {
  width: 1.01rem;
  height: 0.64rem;
}
.btnMode a.prev {
  left: 0;
}

.btnMode a.next,
.server_hover_box a.next {
  right: 0;
}
</style>

